<template>
    <div class="bg">
        <header>
            <el-row>
                <el-col :span="8">日期：{{date}}</el-col>
                <el-col :span="8"><h1 class="title">数据可视化大屏</h1></el-col>
                <el-col :span="8">111<el-icon><FullScreen style="width: 1em; height: 1em; margin-right: 8px"/></el-icon></el-col>
            </el-row>
        </header>
        <main>
            <el-row>
                <el-col :span="6">
                    <div class="chart-box">
                        <div style="height: 100%" ref="pieChart" ></div>
                    </div>
                    <div  style="height: 50%; background: #535bf2;margin: 10px">
                        <div style="height: 100%" ref="line_chart"></div>
                    </div>
                </el-col>
                <el-col :span="12">
                
                </el-col>
                <el-col :span="6">
                    <div style="height: 33%; background: #535bf2;margin: 10px">
                        <div style="height: 100%" ref="pie_chart" ></div>
                    </div>
                    <div  style="height: 33%; background: #535bf2;margin: 10px">
                        <div style="height: 100%" ref="line_chart"></div>
                    </div>
                    <div  style="height: 33%; background: #535bf2;margin: 10px">
                        <div style="height: 100%" ref="line_chart"></div>
                    </div>
                </el-col>
            </el-row>
        </main>
        <footer>
            @版权归个人所有
        </footer>
    </div>
</template>

<script setup lang="ts">
import {formatDate} from '@/utils/common'
import { onMounted, ref, onUnmounted,reactive,toRefs } from 'vue';
import * as echarts from 'echarts';

const pieChart = ref<HTMLElement | null>(null);
let chartInstance: echarts.ECharts | null = null;

const  { ...data } = reactive({
    date:formatDate( new Date() ),
    pie:null,
    line:null,
})
console.log(data)
const  { date } = toRefs(data);
let pieOption = {
    title: {
        text: '用户访问来源',
        subtext: '纯属虚构',
        left: 'center',
        textStyle: { // 标题文本样式
            color: '#fff', // 文本颜色为白色
            // 还可以设置其他样式，比如字体大小、字体粗细等
            fontSize: 16,
            fontWeight: 'bold'
        },
        subtextStyle: { // 副标题文本样式
            color: '#eee', // 副标题文本颜色为灰色
            // 同样可以设置其他样式
        }
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
                { value: 335, name: '小程序' },
                { value: 310, name: '朋友圈' },
                { value: 234, name: '公众号' },
                { value: 135, name: 'APP' },
                { value: 1548, name: '官网' }
            ], // 使用前面定义的 pieData 数组
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
const initChart = () => {
    if (pieChart.value) {
        chartInstance = echarts.init(pieChart.value);
        chartInstance.setOption(pieOption);
    }
};
const resizeChart = () => {
    if (chartInstance) {
        chartInstance.resize();
    }
};
onMounted(()=>{
    initChart();
    window.addEventListener('resize', resizeChart);
})
onUnmounted(() => {
    window.removeEventListener('resize', resizeChart);
    if (chartInstance) {
        chartInstance.dispose();
    }
});
</script>

<style scoped lang="less">
.bg{
    width: 100vw;
    height: 100vh;
    background: url("../../public/bg.png")  center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    padding: 1vmax;
    text-align: center;
    >*{
        width: 100%;
    }
}
header{
    height: 60px;
    line-height: 60px;
    .el-col {
        &:first-child {
            text-align: left;
        }
        &:last-child{
            text-align: right;
        }
    }
}
main{
    flex: 1;
    padding-top: 1vmin;
    .el-row{
        height: 100%;
        width: 100%;
    }
}
footer{
    height: 20px;
    font-size: 15px;
    line-height: 20px;
}
.chart-box{
    background: rgba(0, 0, 255, 0.2);
    border-radius: 5px;
    padding:10px;
    >*{
        min-height: 300px;
    }
}
</style>